<template>
	<div id="container">
		<header>
			<van-nav-bar
			  :fixed='true'
			  title="岁末三响炮"
			  left-text="返回"
			  left-arrow
			  @click-left="onClickLeft" 
			/>
		</header>
		<div id="content">
			<!-- look-img -->
			<div class="look-img">
				<img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=37448129,1419701285&fm=11&gp=0.jpg" alt="">
			</div>
			<!-- look-live -->
			<div class="look-live" v-for="(fvideo,i) in arr" :key="'flive'+i">
				<img v-lazy="fvideo.pimg"></img>
				<h4><van-tag round color="#fefffd" text-color="#cec6c4">LIVE</van-tag>直播</h4>
				<h5>08051005人次观看</h5>
			</div>
			<!-- look-goods -->
			<div class="look-good1">
				<div class="look-goods"  v-for="(fpro,index) in obj">
				<van-card
				  :key="'fgood'+index"
				  tag="直播中"
				  :price="fpro.pprice" 
				  :title="fpro.pdesc"
				  :thumb="fpro.pimg"
				/>
				<van-button @click="add()" round type="danger">立刻抢购</van-button>
				</div>
			</div>
			<div class="look-live" v-for="(svideo,i) in arr2" :key="'slive'+i">
				<img v-lazy="svideo.pimg"></img>
				<h4><van-tag round color="#fefffd" text-color="#cec6c4">LIVE</van-tag>预约播出</h4>
				<h5>08051005人次预约</h5>
			</div>
			<div class="look-good2">
				<div class="look-goods" v-for="(spro,index) in pro" >
					<van-card
					  :key="'sgood'+index"
					  tag="18:00-18:50"
					  :price="spro.pprice"  
					  :title="spro.pdesc"
					  :thumb="spro.pimg"
					/>
					<van-button @click="add()" round type="danger">立刻预约</van-button>
				</div>
			</div>
			
			<!-- look-content-foot -->
			<div class="look-foot">
				一 随时随地 购物随心 一
			</div>
		</div>
	</div>
</template>

<script>
	import * as api from '../../api/agetprolist'
	export default{
		name:"Looklive",
		data(){
			return{
				arr:[],
				arr2:[],
				obj:[],
				pro:[]
			}
		},
		mounted(){
			api.agetProlist({pagenum:5,size:1}).then((data)=>{
				this.arr=data.data.data
			})
			api.agetProlist({pagenum:6,size:1}).then((data)=>{
				this.arr2=data.data.data
			})
			api.agetProlist({pagenum:6,size:3}).then((data)=>{
				this.obj=data.data.data
			})
			api.agetProlist({pagenum:5,size:3}).then((data)=>{
				this.pro=data.data.data
			})
		},
		methods:{
			onClickLeft(){
				this.$router.push('/live')
			},
			add(){
				
			}
		}
	}
</script>

<style scoped>
img,video,h4,h5{
	padding: 0;
	margin: 0;
}
#container{
	height: 100vh;
}
	/* ----------------looklive-header------------ */
header .van-nav-bar{
	height: 48px;
	background: #f8f8f8;
	
}
header .van-nav-bar__title{
	color: #5b5b5d;
	font-weight: 800;
	font-size: 18px;
}
header .van-icon-arrow-left{
	color: #343434;
	font-size:16px;
	font-weight: 800;
}
header .van-nav-bar__text{
	color: #343434;
	font-size:16px;
	font-weight: 500;
}
/* -------------------live-content-img---------------- */
#content{
	background:#ebd7cc;
	width: 100%;
	margin-top: 48px;
}
.look-img img{
	height: 150px;
	width: 100%;
}
/* --------------------live-content-视频 ----------*/
.look-live{
	height: 257px;
	width: 350px;
	margin-left: 12px;
	margin-bottom:6px;
	background: #bdaca4;
}
.look-live img{
	margin-top: 11px;
	margin-left: 7px;
	margin-bottom: 4px;
	width: 336px;
	height: 194px;	
}
.look-live h4{
	margin-bottom:4px;
	margin-left: 8px;
	color:#fbfffa;
	font-size: 13px;
}
.look-live h5{
	color: #fbfffa;
	font-size: 13px;
	margin-left: 8px;
}
/*--------------------------live-goods---------  */
.look-goods{
	position: relative;
	margin-bottom: 7px;
}
.look-goods .van-card{
	height: 138px;
	width:350px;
	margin-left:12px;
}
.look-goods .van-card__thumb{
	width: 123px;
	height: 123px;
}
.look-goods .van-card__title{
	font-size: 17px;
	color: #000;
	margin-top: 20px;
	margin-bottom: 18px;
}
.look-goods .van-card__bottom .van-card__price{
	color: #e03639;
	font-size: 17px;
	font-weight: 600;
}
.look-goods .van-button{
	width:98px;
	height: 28px;
	text-align: center;
	line-height: 28px;
	font-size: 13px;
	position: absolute;
	top: 94px; 
	right: 18px;
}
/* --------------------look-content-foot---------- */
.look-foot{
	font-size:12px;
	color:#be8282;
	height:28px;
	line-height: 28px;
	text-align: center;
}
</style>
